Ext.onReady(function(){
	////// user grid
	var User = Ext.data.Record.create([
	   // the "name" below matches the tag name to read, except "availDate"
	   // which is mapped to the tag "availability"
	   {name: 'id'},
	   {name: 'userId'},
	   {name: 'name'},
	   {name: 'email'}
	]);
      
	var store2 = new Ext.data.Store({
    	url: Myfuse.ContextPath + '/DataEngineServlet?action=demoUser&method=callJson',
    	reader: new Ext.data.JsonReader({
    		root: 'content',
    		totalProperty: 'total',
    		id: 'id'
    	}, User)
	});
	var store = new Myfuse.Store({
		storeId: 'userStore',
    	url: Myfuse.ContextPath + '/DataEngineServlet?action=demoUser&method=callJson',
    	reader: new Myfuse.JsonReader({
    		root: 'records',
    		totalProperty: 'total',
    		id: 'id',
    		datasetId: 'userStore'
    	}, User)
	});
    
	var grid = new Ext.grid.EditorGridPanel({
		id: 'grid',
//    	renderTo: 'user-grid-div',
		region:'center',
		margins:'0 5 5 5',
        store: store,
        columns: [
            {header: "id", width: 200, editor: new Ext.form.TextField(), dataIndex: 'id'},
            {header: "userId", width: 100, editor: new Ext.form.TextField(), dataIndex: 'userId'},
            {header: "name", width: 100, editor: new Ext.form.TextField(), dataIndex: 'name'},
            {header: "email", width: 250, editor: new Ext.form.TextField(), width: 150, dataIndex: 'email'}
        ],
        stripeRows: true,
        title: 'Grid',
	    sm: new Ext.grid.RowSelectionModel(),
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            paramNames: {start: 'start', limit: 'limit', total: 'total'}
        }),
        listeners: {
//        	'rowclick': function(grid, rowIndex, e) {
//        		//alert('you click ' + rowIndex);
//        	}
        },
        tbar: [{
			text: 'New',
			handler: function(button, e) {
				var user = new User({
					id: '',
					userId: '',
					name: '',
					email: ''
				});
				user.custom = {};
				user.custom.state = 'oo';
				console.info(user);
				grid.getStore().insert(0, user);
			}
		}, '-', {
			text: 'Edit',
			handler: function(button, e) {
			}
		}, '-', {
			text: 'Remove',
			handler: function(button, e) {
				var record = grid.getSelectionModel().getSelected();
				if (record) {
					grid.getStore().remove(record);
					grid.getSelectionModel().selectNext();
					grid.getSelectionModel().selectPrevious();
				}
			}
		}, '-', {
			text: 'Cancel',
			handler: function(button, e) {
				var record = grid.getSelectionModel().getSelected();
				if (record) {
					record.reject();
				}
			}
		}, '-', {
			text: 'Submit',
			handler: function(button, e) {
				console.info('Submit');
				var records = grid.getStore().getModifiedRecords();
				var rs = [];
				for(var i=0; i<records.length; i++) {
					rs.push(records[i].data);
				}
				var command = new Myfuse.Command({
					action: 'demoUser',
					method: 'saveJson2',
					parameters: {
						'type': 'edit'
					},
					datasets: [{
						datasetId: 'userStore',
						'records': rs
					}],
					onSuccess: function(){
						grid.getStore().commitChanges();
						Ext.Msg.alert('', 'ok');
					}
				});
				command.execute();
//				console.info(store.customBuffer);
			}
		}, '-', {
			text: 'Submit All',
			handler: function(button, e) {
				console.info('Submit All');
				var records = grid.getStore().customBuffer;
				var rs = [];
				for(var i=0; i<records.add.length; i++) {
					var record = records.add[i].data;
					record._state = Myfuse.Constants.Record.STATE_ADD;
					rs.push(record);
				}
				for(var i=0; i<records.update.length; i++) {
					var record = records.update[i].data;
					record._state = Myfuse.Constants.Record.STATE_UPDATE;
					rs.push(record);
				}
				for(var i=0; i<records.remove.length; i++) {
					var record = records.remove[i].data;
					record._state = Myfuse.Constants.Record.STATE_REMOVE;
					rs.push(record);
				}
				var command = new Myfuse.Command({
					action: 'demoUser',
					method: 'saveJson2',
					parameters: {
						'type': 'edit'
					},
					datasets: [{
						datasetId: 'userStore',
						'records': rs
					}],
					onSuccess: function(){
						grid.getStore().commitChanges();
						Ext.Msg.alert('', 'ok');
					}
				});
				command.execute();
//				console.info(store.customBuffer);
			}
		}]
        
    });
    
    var viewport = new Ext.Viewport({
		layout:'border',
        items:[grid]
	});
    
	store.load({params:{start:0, limit:25}});
});